<template>
	<view class="map">
		<view>
			<view class="item">
				<input type="text" v-model="detail" style="width: 100%;" placeholder="请选择地址"/>
				
			</view>
			<view style="font-size: 12px;text-align: center;padding: 10px;color: #2c6cf4;" @click="selectAddress">重新定位</view>
		</view>
		<view class="btn">
			<view class="configBtn" @click="submitDetail">确定</view>
		</view>
	</view>
</template>

<script>
	import { stores } from '@/api/home.js'
	import amapFile from '@/utils/amap-wx.130.js'
	export default{
		data() {
			return {
				markers: [],
				list:[],
				region:[],
				active:'',
				detail:'',
				longitude:0,
				latitude:0
			}
		},
		onLoad(options) {
			if(options.city) this.region = options.city.split(',')
			if(options.detail) this.detail = options.detail
			console.log(options.city,'options.city')
			this.selectAddress()
		},
		methods:{
			submitDetail(){
				let obj = {
					detail: this.detail,
					longitude: this.longitude,
					latitude: this.latitude
				}
				uni.$emit('detailObj', obj)
				uni.navigateBack({
				    option: 1,
				});
			},
			getAddress(latitude, longitude, detail){
			  let myAmapFun = new amapFile.AMapWX({ key: "abd3c8a41b3f1b099af2646d6944e339" });
			  myAmapFun.getRegeo({
			    location: '' + longitude + ',' + latitude + '',//location的格式为'经度,纬度'
			    success: function (data) {
			      let {province,city,district} = data[0].regeocodeData.addressComponent;
			      city = (city || city?.length>0) ? city:"";
			      console.log("省市区：",province+city+district)
			    },
			    fail: function (info) { }
			  })
			},
			selectAddress(){
				let that = this
				uni.chooseLocation({
					type: 'gcj02', //返回可以用于uni.openLocation的经纬度
					success: function (res) {
						let str = res.address
						// that.region.map(item=>{
						// 	str = str.replace(new RegExp(item, 'g'), '')
						// })
						// that.detail = str
						that.getAddress(res.latitude,res.longitude,str)
						that.longitude = res.longitude
						that.latitude = res.latitude
					}
				});
			}
		}
	}
</script>

<style scoped lang="less">
	.map{
		background-color: #fff;
		height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
.item{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	border-bottom: 1px solid #f5f5f5;
	background-color: #fff;
	input{
		font-size: 12px;
	}
}
.btn{
	padding: 10px;
	display: flex;
	justify-content: center;
}
.configBtn{
	text-align: center;
	width: 80%;
	padding: 8px 20px;
	background-color: #2c6cf4;
	color: #fff;
	font-size: 14px;
	border-radius: 6px;
	height: 20px;
}
</style>